<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>四川土系</title>
    <script src="Static/js/jquery-3.6.0.min.js"></script>
</head>
<script>
    function printData(data) {
        console.log(data);
        var html = "";
        html += '<li>查询到' + data.length + '条记录</li>';
        for (var i = 0; i < data.length; i++) {
            html += '<li>'
            //遍历JSON对象数组
            for (var key in data[i]) {
                //键值对拼接
                html += key + '：' + data[i][key] + '<br>';
            }
            html += '</li>'
        }
        $("#result").html(html);
    }

    function queryByKeywords() {
        $.post({
            url: "/getDataByKeywords",
            data: {"city": $("#city").val()},
            success: function (data) {
                printData(data);
            }
        });
    }

    function queryByLocation() {
        var depth = $("#depth").val();
        var controller;
        if(typeof depth == "undefined" || depth == null || depth == ""){
            controller = "/getDataByCoordinate";
        }else{
            controller = "/getDataByCoordinateAndDepth";
        }
        $.post({
            url: controller,
            data: {"longitude": $("#longitude").val(), "latitude": $("#latitude").val(),"depth":depth},
            success: function (data) {
                printData(data);
            }
        });
    }
</script>
<body>



通过位置查询<br>
关键字 <input type="text" id="city">
<input type="button" id="cityBtn" value="查询" onclick="queryByKeywords()"><br>

<hr>

通过经纬度查询 <br>
经度 <input type="text" id="longitude">
纬度 <input type="text" id="latitude">
深度(选填) <input type="text" id="depth">
<input type="button" id="coordinateBtn" value="查询" onclick="queryByLocation()"><br>

<ul id="result">

</ul>
</body>
</html>